<template>
	<view class="content">
		<!-- 使用css画一段圆弧 -->
		<view class="pure_top"></view>
		<!-- 占位 -->
		<!-- <view v-if="showHeader" class="place"></view> -->
		<!-- 用户未登录 -->
		<view class="to_login"  v-if="!isLogin && showCard">
			<image style="width: 100px;height: 100px;" src="../../static/icon/shop.png"></image>
			<button @tap="toLogin" type="primary" plain="true" hover-class="hover" style="border: 1px solid #E80505; color: #E80505; margin-top: 20px; height: 40px;display: flex;align-items: center;">去登陆</button>
		</view>
		<!-- 商品列表 -->
		<view class="goods-list" v-if="isLogin && showCard">
			<view class="tis" v-if="goodsList.length ==0 && showCard">
				<empty src="empty1" title="购物车空空如也～" text="快挑选你喜欢的商品，让购物车充实起来吧。" v-if="goodsList.length ==0" />
			</view>
			<view class="row" v-for="(row,index) in goodsList" :key="index" >
				<!-- 删除按钮 -->
				<view class="menu" @tap.stop="deleteGoods(row.id)">
				<view class="icon delete">&#xe631;</view>
				</view>
				<!-- 商品 -->
				<view class="carrier" :class="[theIndex==index?'open':oldIndex==index?'close':'']" @touchstart="touchStart(index,$event)" @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)">
					<!-- checkbox -->
					<view class="checkbox-box" @tap="selected(index)">
						<view class="checkbox">
							<view :class="[selects[index]?'on':'']"></view>
						</view>
					</view>
					<!-- 商品信息 -->
					<view class="goods-info" @tap="toGoods(row)">
						<view class="img">
							<image :src="row.originalImg | formatUrl"></image>
						</view>
						<view class="info">
							<view class="goods-info-text">
								<view class="title" v-if="row.goodsName">{{row.goodsName && row.goodsName.length >= 13 ? row.goodsName.slice(0, 13) + '...' : row.goodsName }}</view>
								<view class="brief" v-if="row.goodsBrief">{{row.goodsBrief && row.goodsBrief.length >= 10 ? row.goodsBrief.slice(0, 10) + '...' : row.goodsBrief }}</view>
								<view class="spec" v-if="row.goodsAttr">{{row.goodsAttr}}</view>
							</view>
							<view class="price-number">
								<view class="price">￥{{row.shopPrice}}</view>
								<view class="number">
									<view class="sub" @tap.stop="sub(index)">
										<view class="icon">&#xe6aa;</view>
									</view>
									<view class="input" @tap.stop="discard">
										<input type="number" v-model="row.goodsNumber" @input="sum($event,index)" />
									</view>
									<view class="add"  @tap.stop="add(index)">
										<view class="icon">&#xe656;</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 脚部菜单 :style="{bottom:footerbottom}"-->
		<view class="footer" v-if="isLogin && goodsList.length !==0 && showCard" >
			<view class="checkbox-box" @tap="allSelect">
				<view class="checkbox">
					<view :class="[isAllselected?'on':'']"></view>
				</view>
				<view class="text">全选</view>
			</view>
			<view class="delBtn" @tap="deleteList" v-if="selectedList.length>0">删除</view>
			<view class="settlement">
					<view class="sum">合计:<view class="money">￥{{sumPrice}}</view></view>
					<view class="btn" @tap="toConfirmation">结算({{selectedList.length}})</view>
				</view>
		</view>
	</view>
</template>

<script>
	import {  
		mapActions
	} from 'vuex';
	import shopCartApis from '@/common/services/shopCart.js'
	import { getCookie, setCookie } from '@/utils/cookiesUtil.js';
	import empty from '@/components/empty.vue';
	export default {
		data() {
			return {
				sumPrice:'0.00',
				headerPosition:"fixed",
				headerTop:null,
				statusTop:null,
				showHeader:true,
				selectedList:[],
				isAllselected:false,
				goodsList:[
				],
				//控制滑动效果
				theIndex:null,
				oldIndex:null,
				isStop:false,
				selects:[],
				isLogin: false,
				showCard: false, //数据加载的过程
			}
		},
		components: {
			empty
		},
		filters: {
			formatUrl: function(url) {
				return url && url.indexOf('http') !== -1 ? url : 'http://106.13.76.109:8080/xsmall/sys/common/view/'+ url
			}
		},
		onPageScroll(e){
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop>=0?"fixed":"absolute";
			this.headerTop = e.scrollTop>=0?null:0;
			this.statusTop = e.scrollTop>=0?null:-this.statusHeight+'px';
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
		    setTimeout(function () {
		        uni.stopPullDownRefresh();
		    }, 1000);
		},
		onShow() {
			if (!getCookie('token')) {
				this.isLogin = false;
				this.showCard = true;
			} else {
				shopCartApis.getShopCartList().then(res => {
					console.log('res:', res);
					this.goodsList = res;
					this.isLogin = true;
					setTimeout(() => {
						this.showCard = true;
					}, 300);
				}).catch(error => {
					// token 失效的情况
					setCookie('token', '')
					console.error(error);
					this.isLogin = false;
					setTimeout(() => {
						this.showCard = true;
					}, 200);
				})
			}
			//兼容H5下结算条位置
			// #ifdef H5
				// uni.hideTabBar()
				this.footerbottom = document.getElementsByTagName('uni-tabbar')[0].offsetHeight+'px';
			// #endif
			// #ifdef APP-PLUS
			this.showHeader = false;
			this.statusHeight = plus.navigator.getStatusbarHeight();
			// #endif
		},
		methods: {
			//加入商品 参数 goods:商品数据
			joinGoods(goods){
				/*
				* 这里只是展示一种添加逻辑，模板并没有做从其他页面加入商品到购物车的具体动作，
				* 在实际应用上，前端并不会直接插入记录到goodsList这一个动作，一般是更新列表和本地列表缓存。
				* 一般商城购物车的增删改动作是由后端来完成的,
				* 后端记录后返回前端更新前端缓存
				*/
				let len = this.goodsList.length;
				let isFind = false;//是否找到ID一样的商品
				for(let i=0;i<len;i++){
					let row = this.goodsList[i];
					if(row.id==goods.id )
					{	//找到商品一样的商品
						this.goodsList[i].number++;//数量自增
						isFind = true;//找到一样的商品
						break;//跳出循环
					}
				}
				if(!isFind){
					//没有找到一样的商品，新增一行到购物车商品列表头部
					this.goodsList[i].unshift(goods);
				}
			},
			//控制左滑删除效果-begin
			touchStart(index,event){
				//多点触控不触发
				if(event.touches.length>1){
					this.isStop = true;
					return ;
				}
				this.oldIndex = this.theIndex;
				this.theIndex = null;
				//初始坐标
				this.initXY = [event.touches[0].pageX,event.touches[0].pageY];
			},
			touchMove(index,event){
				//多点触控不触发
				if(event.touches.length>1){
					this.isStop = true;
					return ;
				}
				let moveX = event.touches[0].pageX - this.initXY[0];
				let moveY = event.touches[0].pageY - this.initXY[1];
				
				if(this.isStop||Math.abs(moveX)<5){
					return ;
				}
				if (Math.abs(moveY) > Math.abs(moveX)){
					// 竖向滑动-不触发左滑效果
					this.isStop = true;
					return;
				}
				
				if(moveX<0){
					this.theIndex = index;
					this.isStop = true;
				}else if(moveX>0){
					if(this.theIndex!=null&&this.oldIndex==this.theIndex){
						this.oldIndex = index;
						this.theIndex = null;
						this.isStop = true;
						setTimeout(()=>{
							this.oldIndex = null;
						},150)
					}
				}
			},
			touchEnd(index,$event){
				//结束禁止触发效果
				this.isStop = false;
			},
			//控制左滑删除效果-end
			//商品跳转
			toGoods(e){
				uni.showToast({title: '商品'+e.id,icon:"none"});
				uni.navigateTo({
					url: '../goods/goods' 
				});
			},
			//跳转确认订单页面
			toConfirmation(){
				let tmpList=[];
				let len = this.goodsList.length;
				for(let i=0;i<len;i++){
					if(this.selects[i]) {
						tmpList.push(this.goodsList[i]);
					}
				}
				if(tmpList.length<1){
					uni.showToast({
						title:'请选择商品结算',
						icon:'none'
					});
					return ;
				}
				// setOrderInfo
				this.setOrderInfo({orderInfo: tmpList})
				uni.navigateTo({
					url:'../order/confirmation'
				})
			},
			//删除商品
			deleteGoods(id){
				let len = this.goodsList.length;
				for(let i=0;i<len;i++){
					if(id==this.goodsList[i].id){
						this.goodsList.splice(i, 1);
						break;
					}
				}
				this.selectedList.splice(this.selectedList.indexOf(id), 1);
				this.sum();
				this.oldIndex = null;
				this.theIndex = null;
				shopCartApis.deleteShopCart(id).then(res => {
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '商品已移除'
					// })
				})
			},
			// 删除商品s
			deleteList(){
				let len = this.selectedList.length;
				while (this.selectedList.length>0)
				{
					this.deleteGoods(this.selectedList[0]);
				}
				this.selectedList = [];
				this.isAllselected = this.selectedList.length == this.goodsList.length && this.goodsList.length>0;
				this.sum();
			},
			// 选中商品
			selected(index){
				this.selects[index] = !this.selects[index];
				let i = this.selectedList.indexOf(this.goodsList[index].id);
				i>-1?this.selectedList.splice(i, 1):this.selectedList.push(this.goodsList[index].id);
				this.isAllselected = this.selectedList.length == this.goodsList.length;
				this.sum();
			},
			//全选
			allSelect(){
				let len = this.goodsList.length;
				let arr = [];
				for(let i=0;i<len;i++){
					this.selects[i] = true;
					arr.push(this.goodsList[i].id);
				}
				this.selectedList = this.isAllselected?[]:arr;
				this.selects = this.isAllselected?[]: (new Array(len)).fill(true);  
				this.isAllselected = this.isAllselected||this.goodsList.length==0?false : true;
				this.sum();
			},
			// 减少数量
			sub(index){
				if(this.goodsList[index].goodsNumber<=1){
					return;
				}
				this.goodsList[index].goodsNumber--
				const number = this.goodsList[index].goodsNumber
				shopCartApis.updateShopCart({
					id: this.goodsList[index].id,
					goodsNumber: number
				}).then(res => {
				})
				this.sum();
			},
			// 增加数量
			add(index){
				this.goodsList[index].goodsNumber++;
				const number = this.goodsList[index].goodsNumber;
				shopCartApis.updateShopCart({
					id: this.goodsList[index].id,
					goodsNumber: number
				}).then(res => {
				})
				this.sum();
			},
			// 合计
			sum(e,index){
				this.sumPrice=0;
				let len = this.goodsList.length;
				for(let i=0;i<len;i++){
					if(this.selects[i]) {
						if(e && i==index){
							this.sumPrice = this.sumPrice + (e.detail.value*this.goodsList[i].shopPrice);
						}else{
							this.sumPrice = this.sumPrice + (this.goodsList[i].goodsNumber*this.goodsList[i].shopPrice);
						}
					}
				}
				this.sumPrice = this.sumPrice.toFixed(2);
			},
			discard() {
				//丢弃
			},
			...mapActions({
				setOrderInfo: 'SET_ORDER_INFO'
			}),
			toLogin() {
				uni.navigateTo({
					url: '../login/login'
				})
			}
		},
		/**
		 * 当 searchInput 配置 disabled 为 true 时触发
		 */
		onNavigationBarSearchInputClicked(e) {
			console.log('事件执行了')
			uni.navigateTo({
				url: '../search/search'
			});
		},
		/**
		 *  点击导航栏 buttons 时触发
		 */
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '../chat/chat',
				animationType: 'zoom-out',
				animationDuration: 3000
			});
		}
	}
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'iconfont';
		src: url('../../css/font/iconfont.eot');
		src: url('../../css/font/iconfont.eot?#iefix') format('embedded-opentype'),
		url('../../css/font/iconfont.woff') format('woff'),
		url('../../css/font/iconfont.ttf') format('truetype'),
		url('../../css/font/iconfont.svg#iconfont') format('svg');
	}
	.icon {
		font-family:"iconfont" !important;
		font-weight: 200;
		font-style:normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
		cursor: pointer;
		&:hover {
			color: #E80505;
		}
	}
	// page{position: relative;background-color: #fff;}
	.checkbox-box{
		display: flex;
		align-items: center;
		.checkbox{
			width: 30upx;
			height: 30upx;
			border-radius: 100%;
			border: solid 1upx #E80505;
			display: flex;
			justify-content: center;
			align-items: center;
			.on{
				width: 24upx;
				height: 24upx;
				border-radius: 100%;
				background-color: #E80505;
			}
		}
		.text{
			font-size: 28upx;
			margin-left: 10upx;
		}
	}
page {
	height: 100%;
}
.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		background-color: #fff;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height);//覆盖样式
		/*  #endif  */
	}
	.header{
		width: 92%;
		padding: 0 4%;
		height: 100upx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #fff;
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);
		/*  #endif  */
		.title{
			font-size: 36upx;
		}
		
	}
	.place{	
		background-color: #ffffff;
		height: 100upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}
	.goods-list{
		width: 100%;
		padding: 0upx 0 240upx 0;
		.tis{
			margin-top: 200upx;
			width: 100%;
			height: 60upx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 32upx;
			image {
				width: 160upx;
				height: 160upx;
			}
		}
		.row{
			width: calc(92%);
			height: calc(22vw + 68upx); 
			margin: 20upx auto;
			
			border-radius: 15upx;
			box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
			display: flex;
			align-items: center;
			position: relative;
			overflow: hidden;
			z-index: 4;
			border: 0;
			.delete {
				font-size: 56upx;
			}
			.menu{
				.icon{
					color: #fff;
					// font-size: 25upx;
				}
				position: absolute;
				width: 30%;
				height: 100%;
				right: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: rgba(0,0,0,0.5);
				color: #fff;
				z-index: 2;
			}
			.carrier{
				@keyframes showMenu {
					0% {transform: translateX(0);}100% {transform: translateX(-30%);}
				}
				@keyframes closeMenu {
					0% {transform: translateX(-30%);}100% {transform: translateX(0);}
				}
				&.open{
					animation: showMenu 0.25s linear both;
				}
				&.close{
					animation: closeMenu 0.15s linear both;
				}
				background-color: #fff;
				.checkbox-box{
					padding-left: 20upx;
					flex-shrink: 0;
					height: 22vw;
					margin-right: 16upx;
				}
				position: absolute;
				width: 100%;
				padding: 0 0;
				height: 100%;
				z-index: 3;
				display: flex;
				align-items: center;
				.goods-info{
					width: 100%;
					display: flex;
					padding-right: 20upx;
					.img{
						width: 24vw;
						height: 24vw;
						border-radius: 10upx;
						overflow: hidden;
						flex-shrink: 0;
						margin-right: 10upx;
						image{
							width: 24vw;
							height: 24vw;
						}
					}
					.info{
						width: 100%;
						height: 24vw;
						overflow: hidden;
						display: flex;
						flex-wrap: wrap;
						position: relative;
						.goods-info-text {
							display: flex;
							flex-direction: column;
							.title{
								width: 100%;
								font-size: 28upx;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								// text-align: justify;
								overflow: hidden;
							}
							.brief {
								color: #333;
								font-size: 26upx;
							}
							.spec{
								font-size: 20upx;
								background-color: #f3f3f3;
								color: #a7a7a7;
								height: 30upx;
								display: flex;
								align-items: center;
								padding: 2upx 4upx 2upx 10upx;;
								border-radius: 15upx;
								margin: 4upx 0 4upx 16upx;
							}	
						}
						.price-number{
							position: absolute;
							width: 100%;
							bottom: 0upx;
							display: flex;
							justify-content: space-between;
							align-items: flex-end;
							font-size: 28upx;
							height: 60upx;
							.price{
								color:  #E80505;
								font-weight: 600;
							}
							.number{
								display: flex;
								justify-content: center;
								align-items: flex-end;
								.input{
									width: 60upx;
									height: 60upx;
									margin: 0 10upx;
									background-color: #f3f3f3;
									input{
										width: 60upx;
										height: 60upx;
										display: flex;
										justify-content: center;
										align-items: center;
										text-align: center;
										font-size: 26upx;
									}
								}
								.sub ,.add{
									width: 45upx;
									height: 45upx;
									background-color: #f3f3f3;
									border-radius: 5upx;
									.icon{
										font-size: 22upx;
										width: 45upx;
										height: 45upx;
										display: flex;
										justify-content: center;
										align-items: center;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	.footer{
		width: 100%;
		box-sizing: border-box;
		box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
		padding: 0 4%;
		background-color: #fbfbfb;
		height: 98upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28upx;
		position: fixed;
		bottom: 100upx;
		z-index: 5;
		.delBtn{
			border: solid 1upx #E80505;
			color: #E80505;
			padding: 0 30upx;
			height: 50upx;
			border-radius: 30upx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.settlement{
			width: 60%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.sum{
				width: 50%;
				font-size: 28upx;
				margin-right: 10upx;
				display: flex;
				justify-content: flex-end;
				.money{
					font-weight: 600;
				}
			}
			.btn{
				padding: 0 30upx;
				height: 50upx;
				background-image:linear-gradient( 135deg, #FDD819 10%, #E80505 100%);
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 30upx;
			}
		}
	}
.content {
	width: 100%;
	height: 100%;
	background: #f8f8f8;
	padding-bottom: 100upx; 
	.pure_top {
		width: 100%;  
		height: 200upx;  
		position: relative;  
		left: 0;
		top: 0;
		z-index: 1;  
		overflow: hidden;
		margin-bottom: -100upx;
		&:after {
			content: '';
			width: 110%; 
			height: 100px;
			position: absolute;
			left: -5%;
			top: 0;
			z-index: -1;
			border-radius: 0 0 50% 50%;
			background-image: linear-gradient(135deg, #FDD819 0%, #E80505 60%);
		}
	}
	.to_login {
		margin: 30% auto;
		width: 40%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.hover {
			color: #fff !important;
			background-image: linear-gradient(to right, rgb(162, 49, 62), rgba(162, 49, 62, 0.8));
		}
	}
}
	
</style>
